#banner {
    background: #111;
    text-align: center;
    padding-top: 1px;
    padding-bottom: 8vw;

    // &  => 父级
    &>h3 {
        color: #999;
        text-transform: uppercase;
        font-size: 34px;
        margin-top: 15vw;
        line-height: 1;
        font-family: OSLight;
        ;

        &>span {
            color: #fcac45;
            font-family: OSBold;
        }
    }

    &>p {
        color: #c3c3c3;
        font-size: 15px;
        font-family: OSLight;

        span {
            font-family: OSBold;
        }
    }

    .arrow {
        margin-top: 20vw;
    }
}

#about {
    // width: 100vw;
    padding-top: 10vw;

    .about-box {
        width: 80%;
        margin: 0 auto;
        display: flex;
    }

    .left {
        width: 60%;
    }

    .right {
        width: 40%;

        h6 {
            text-transform: uppercase;
            color: #636363;
            font-size: 20px;
        }

        h3 {
            font-size: 34px;
            color: #000;
            text-transform: uppercase;

            span {
                font-family: OSBold;
            }
        }

        line {
            width: 100px;
            height: 5px;
            background-color: #fcac45;
        }

        .content {
            margin-top: 30px;
        }

        ul {
            margin-top: 30px;
        }

        li {
            display: flex;
            margin-bottom: 10px;

            .icon {
                margin-right: 10px;
            }

            .text {
                font-family: OSBold;

                span {
                    font-family: OSLight;
                }
            }

            &:last-child {
                margin-bottom: 0px;
            }
        }

        .about-btn {
            width: 195px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            border: 1px solid #7f7f7f;
            border-radius: 3px;
            text-transform: uppercase;
            font-size: 12px;
            margin-top: 30px;

            img {
                margin-top: -4px;
                margin-right: 5px;
            }

        }
    }
}

#team {
    background-color: #070707;
    padding-top: 1px;
    padding-bottom: 6vw;

    h3 {
        text-align: center;
        font-size: 32px;
        color: #fff;
        font-family: OSLight;
        text-transform: uppercase;
        margin-top: 8vw;

        span {
            font-family: OSBold;
        }
    }

    .line {
        width: 100px;
        height: 5px;
        background-color: #fcac45;
        margin: 26px auto 0;
    }

    .line2 {
        width: 66px;
        height: 5px;
        background-color: #fcac45;
        margin: 10px auto 0;
    }

    .team-swiper {
        width: 80%;
        margin-top: 10vw;
        padding-bottom: 6vw;

        .list {
            display: flex;

            .item {
                text-align: center;

                img {
                    width: 128px;
                    height: 128px;
                    object-fit: cover;
                    border-radius: 50%;
                }

                .nickname {
                    color: #fff;
                    margin-top: 20px;

                    p {
                        font-size: 12px;
                        color: #acacac;
                        font-family: OSLight;
                    }
                }

                .content {
                    margin-top: 20px;
                    color: #fff;
                    font-family: OSLight;
                }
            }
        }

        .swiper-pagination-bullet {
            border-radius: unset;
            background-color: #fff;
            opacity: 1;
        }

        .swiper-pagination-bullet-active {
            background-color: #fcac45;
        }
    }


}

#services {
    .services-box {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 10vw;
        padding-top: 8vw;

    }

    h3 {
        text-align: center;
        font-size: 44px;
        color: #000;
        font-family: OSLight;
        text-transform: uppercase;

        span {
            font-family: OSBold;
        }
    }

    .line {
        width: 100px;
        height: 5px;
        background-color: #fcac45;
        margin: 10px auto 0;
    }

    .line2 {
        width: 66px;
        height: 5px;
        background-color: #fcac45;
        margin: 10px auto 0;
    }

    .txt {
        margin-top: 40px;
        font-size: 16px;
        text-align: center;
        color: #797979;
    }

    .list {
        display: flex;

        & .item:nth-child(1) h5 {
            font-family: OSLight;
            font-weight: 600;
            color: #222;
        }

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .picture {
                width: 112px;
                height: 112px;
                border-radius: 50%;
                border: 6px solid #fcac45;
                margin-top: 8vw;

                img {
                    padding: 30px;
                }
            }

            h5 {
                font-family: OSBold;
                font-size: 18px;
                text-align: center;
                margin-top: 24px;
            }

            .introduce {
                text-align: center;
                margin-top: 10px;
                font-size: 14px;
                color: #222;
            }
        }


    }

}

#clients {
    background-color: #000;

    .clients-box {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        padding-bottom: 6vw;
        padding-top: 8vw;
    }

    h3 {
        text-align: center;
        font-size: 44px;
        color: #fff;
        font-family: OSLight;
        text-transform: uppercase;
        span {
            font-family: OSBold;
        }
    }

    .line {
        width: 100px;
        height: 5px;
        background-color: #fcac45;
        margin: 10px auto 0;
    }

    .line2 {
        width: 66px;
        height: 5px;
        background-color: #fcac45;
        margin: 10px auto 0;
    }

    .clients-swiper {
        width: 80%;
        margin-top: 8vw;
        padding-bottom: 10vw;

        .swiper-slide {
            margin-right: 5px;
        }

        .list {
            display: flex;
            justify-content: space-evenly;

            img {
                width: 11vw;
                margin-right: 2vw;
            }

        }

        .swiper-pagination-bullet {
            border-radius: unset;
            background-color: #fff;
            opacity: 1;
        }

        .swiper-pagination-bullet-active {
            background-color: #fcac45;
        }
    }

}

#work {
    .work-box {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 6vw;
        padding-top: 8vw;
    }

    h3 {
        text-align: center;
        font-size: 44px;
        color: #000;
        font-family: OSLight;
        text-transform: uppercase;

        span {
            font-family: OSBold;
        }
    }

    .line {
        width: 100px;
        height: 5px;
        background-color: #fcac45;
        margin: 10px auto 0;
    }

    .line2 {
        width: 66px;
        height: 5px;
        background-color: #fcac45;
        margin: 10px auto 0;
    }

    .txt {
        margin-top: 40px;
        font-size: 16px;
        text-align: center;
        color: #797979;
    }

    .middle {

        margin-top: 5vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;

        .left {
            // text-indent: 1vw;
            // font-size: 18px;
            font-family: OSBold;
        }

        .right {
            font-weight: 500;

            .breadcrumb {
                background-color: white;
                margin-bottom: unset;

                li a {
                    color: #6c6c6c;
                }

                .active a {
                    color: #000;
                }
            }

            .breadcrumb>li+li:before {
                color: #CCCCCC;
                content: "| ";
                padding: 0 5px;
            }

        }

    }

    .list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 1vw;
        justify-content: space-between;

        img {
            width: 226px;
            height: 220px;
            margin-bottom: 1.5vw;
        }
    }
}

#test {

    background-color: #000;

    .test-box {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        padding-bottom: 6vw;
        padding-top: 8vw;

    }

    h3 {
        text-align: center;
        font-size: 44px;
        color: #fff;
        font-family: OSLight;
        text-transform: uppercase;

        span {
            font-family: OSBold;
        }

    }

    .line {
        width: 100px;
        height: 5px;
        background-color: #fcac45;
        margin: 10px auto 0;
    }

    .line2 {
        width: 66px;
        height: 5px;
        background-color: #fcac45;
        margin: 10px auto 0;
    }


    .test-swiper {
        width: 80%;
        margin-top: 8vw;
        padding-bottom: 8vw;

        .swiper-slide {

            .txt {
                // margin-top: 40px;
                font-size: 18px;
                text-align: center;
                font-weight: 600;
                color: #e7e7e7;
            }

            .txt-bottom {
                margin-top: 4vw;
                font-size: 16px;
                text-align: center;
                font-weight: 500;
                color: #e7e7e7;
            }
        }

        .swiper-pagination-bullet {
            border-radius: unset;
            background-color: #fff;
            opacity: 1;
        }

        .swiper-pagination-bullet-active {
            background-color: #fcac45;
        }


    }


}

#contact {
    .contact-box {
        width: 70%;
        margin: 0 auto;
        padding-bottom: 5vw;
        padding-top: 5vw;
    }

    h3 {
        text-align: center;
        font-size: 42px;
        color: #000;
        font-weight: 200;
        text-transform: uppercase;
    }

    .line {
        width: 100px;
        height: 5px;
        background-color: #fcac45;
        margin: 10px auto 0;
    }

    .line2 {
        width: 66px;
        height: 5px;
        background-color: #fcac45;
        margin: 10px auto 0;
    }

    .txt {
        margin-top: 40px;
        font-size: 16px;
        text-align: center;
        color: #797979;
    }

    .content {
        width: 70%;
        margin: 5vw auto;
        display: flex;
        flex-direction: column;
        color: #a1a1a1;
        span{
            color: red;
            font-size: 14px;
        }

        .top {
            width: 100%;
            display: flex;
            input{
                width: 99%;
                height: 3vw;
                padding: unset;
            }
            .left {
                width: 90%; 
                input{
                    float: left;
                }
            }

            .right {
                width: 90%;
                text-indent: 0.3vw;
                input{
                    float: right;
                }
            }
        }

        .bottom {
            width: 100%;
            margin-top: 1vw;
            input{
                width: 100%;
                height: 16vw;
            }
        }
        .btn{
            width: 8vw;
            margin-left: auto;
            color: #fff;
            margin-top: 2vw;
            border-radius: unset;
            background-color: #fcac45;
        }
    }
}

#foot{
    background-color: #000;
    padding: 1vw;
    // padding-bottom: 5vw;
    .foot-box{
        width: 80%;
        margin:0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
            color: #fff;
            width: 40%;
            font-size: 12px;
        }
        .right{
            width: 20%;
            font-size:30px ;
            display: flex;
            color: #fff;
            text-indent: 10px;
        }
    }
}

@media screen and (max-width: 1280px) {
    #about {
        padding-bottom: 10vw;
    }

    #about .about-box {
        .right {
            h3 {
                font-size: 30px;
            }
        }
    }

    #services .list {
        .item {
            margin-right: 15px;
        }
    }

    #work .work-box {
        .middle {
            .dropdown {
                display: none;
            }
        }
    }
}

@media screen and (max-width: 1024px) {}


@media screen and (max-width: 768px) {
    #banner>h3 {
        margin-top: 100px;
        font-size: 28px;
    }

    #banner>p {
        margin: 0 60px;
    }

    #about {
        padding-bottom: 10vw;
    }

    #about .about-box {
        flex-wrap: wrap;

        .left {
            width: 100%;
        }

        .right {
            width: 100%;

            h3 {
                font-size: 24px;
            }
        }
    }

    #team .team-swiper .list {
        flex-wrap: wrap;

        .item {
            width: 50%;
            margin-bottom: 20px;
        }
    }

    #services .services-box {
        h3 {
            font-size: 18px;
        }

        .txt {
            font-size: 12px;
        }

        .list {
            flex-wrap: wrap;

            .item {
                width: 45%;
                margin-right: 5%;
            }
        }
    }

    #clients .clients-box {
        h3 {
            font-size: 18px;
        }

        .txt {
            font-size: 12px;
        }

        .list {
            flex-wrap: wrap;

            img {
                width: 10vw;
                margin-right: 2vw;
            }
        }
    }

    #work .work-box {

        h3 {
            font-size: 18px;
        }

        .txt {
            font-size: 12px;
        }

        .middle {
            .dropdown {
                display: inline;

                & .dropdown-menu {
                    min-width: unset;
                }

                .dropdown-menu>li>a {
                    font-size: 10px;
                    padding: 3px 6px;
                }
            }

            .right-bar {
                display: none;
            }
        }

        .list {
            img {
                width: 49%;
                height: auto;
            }
        }

    }

    #test .test-box {
        h3 {
            font-size: 18px;
        }

        .test-swiper .swiper-slide {
            .txt {
                font-size: 12px;
            }
        }
    }

    #contact .contact-box{
        h3 {
            font-size: 18px;
        }

        .test-swiper .swiper-slide {
            .txt {
                font-size: 12px;
            }
        }
        .content {
            font-size: 12px;
            .bottom input{
                padding-bottom: 18vw;
            }
            .btn{
                padding-right: 12vw;
            }
        }
    }

    #foot .foot-box{
       width: 90%;
      .left{
        font-size: 10px;
      }
      .right{
        text-indent: unset;
      }
    }

}

@media screen and (max-width: 375px) {}